<script setup lang="ts">
import Editor, { RowFlex } from '@hufe921/canvas-editor'
import { onMounted, ref } from 'vue'
const canvasEditor = ref();

const editor = ref();

onMounted(() => {
  editor.value = new Editor(
    canvasEditor.value,
    {
      header: [
        {
          type: "control",
          value: 'Header',
          rowFlex: RowFlex.CENTER
        }
      ],
      main: [
        {
          value: 'H5-Dooring零代码',
          size: 15
        }
      ],
      footer: [
        {
          value: 'H5-Dooring',
          size: 12
        }
      ]
    },
    {}
  );
})
</script>

<template>
  <div ref="canvasEditor"></div>
</template>

<style scoped>

</style>
